<!-- 公务号码通讯录，前端显示 -->
<template>
  <PageWrapper dense fixedHeight contentClass="flex">
    <!-- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> -->
    <!-- 左侧分类树 -->
    <div
      class="ml-0 mr-2 mt-2 w-1/4 xl:w-1/5 overflow-hidden"
      style="border: 1px solid rgb(234, 229, 229); background-color: rgb(248, 239, 232)"
    >
      <a-tree
        @select="handleSelect"
        treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
        :defaultExpandAll="true"
        :treeData="treeData.child"
        :fieldNames="fieldNames"
        style="background-color: rgb(248, 239, 232)"
      />
    </div>
    <!-- 右侧公务号码列表 -->
    <div
      class="ml-0 mr-0 mt-2 w-3/4 xl:w-4/5 overflow-hidden"
      style="border: 1px solid rgb(234, 229, 229)"
    >
      <div style="color: rgb(7, 173, 173); font-weight: bold; text-align: center; font-size: large"
        >（市话拨内部四位号码者前面加拨6306即可）</div
      >
      <BasicTable @register="registerTable" size="small" :searchInfo="searchInfo">
        <!-- 定义名称列的筛选功能，搜索内容高亮显示 -->
        <template
          #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        >
          <!-- 搜索输入框 -->
          <div style="padding: 8px">
            <a-input
              ref="searchInput"
              :placeholder="`搜索名称`"
              :value="selectedKeys[0]"
              :loading="true"
              style="width: 188px; margin-bottom: 8px; display: block"
              @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              <template #icon><search-outlined /></template>
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
              重置
            </a-button>
          </div>
        </template>
        <!-- 自定义搜索图标 -->
        <template #customFilterIcon="{ filtered }">
          <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
        </template>
        <!-- 搜索内容过滤高亮 -->
        <template #bodyCell="{ text, column }">
          <span v-if="state.searchText && state.searchedColumn === column.dataIndex">
            <template
              v-for="(fragment, i) in text
                .toString()
                .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
            >
              <mark
                v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
                :key="i"
                class="highlight"
              >
                {{ fragment }}
              </mark>
              <template v-else>{{ fragment }}</template>
            </template>
          </span>
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';

  import { BasicTable, useTable } from '/@/components/Table';
  import { SearchOutlined } from '@ant-design/icons-vue';

  import { getAll } from '/@/api/addressbook/official/category';
  import { query } from '/@/api/addressbook/official/phone';

  import {
    officialContactTableColumns,
    phoneQueryConditionFormSchema,
  } from './officialphone/officialphone.data';

  export default defineComponent({
    name: 'OfficialManagement',
    components: {
      PageWrapper,
      BasicTable,
      SearchOutlined,
    },

    setup() {
      const fieldNames = reactive({ children: 'children', title: 'name', key: 'id' });
      const treeData = reactive({
        child: [
          {
            name: '公务号码分类树',
            id: '',
            children: [],
          },
        ],
      });

      //筛选输入的内容
      const searchInput = ref();

      const state = reactive({
        searchText: '',
        searchedColumn: '',
      });

      //筛选搜索按钮
      const handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        state.searchText = selectedKeys[0];
        state.searchedColumn = dataIndex;
      };

      //筛选重置按钮
      const handleReset = (clearFilters) => {
        clearFilters({ confirm: true });
        state.searchText = '';
      };

      //点击分类获取的分类id用于查询公务号码，或者修改或删除分类的条件
      const searchInfo = reactive<Recordable>({});

      /**
       * 点击分类获取分类id
       */
      function handleSelect(keys) {
        // console.log(keys[0]);
        searchInfo.categoryId = keys[0];
        console.log('选中的分类id', searchInfo.categoryId);
        reload();
      }

      /**
       * 获取公务号码分类信息
       */
      getAllCategory();
      function getAllCategory() {
        getAll().then((res) => {
          console.log(res);
          res.push({ id: 0, name: '未分类号码' });
          treeData.child[0].children = res;
        });
      }

      /**
       * 获取公务号码信息
       */
      const [registerTable, { reload }] = useTable({
        // title: '公务号码联系信息',
        api: query,
        columns: officialContactTableColumns,
        useSearchForm: false,
        formConfig: {
          labelWidth: 80,
          schemas: phoneQueryConditionFormSchema,
          autoSubmitOnEnter: true,
          showResetButton: false,
        },
        showIndexColumn: false,
        bordered: true,
        striped: false,
        canResize: true,
        pagination: false,
        scroll: { y: 400 },
      });

      return {
        registerTable,
        getAllCategory,
        handleSelect,
        fieldNames,
        treeData,
        searchInfo,

        searchInput,
        handleSearch,
        handleReset,
        state,
      };
    },
  });
</script>
<style scoped lang="less">
  .highlight {
    background-color: rgb(250, 216, 170);
    padding: 0px;
  }
</style>
